<template>
<!-- 咖啡详情页 -->
<div class="details">
    <div class="details-operate">
        <div @click="returns()">×</div>
        <div>
            <van-cell title="分享" @click="showShare = true" />
            <van-share-sheet
            v-model="showShare"
            title="立即分享给好友"
            :options="options"
            @select="onSelect"
            />
        </div>
        
    </div>
    
    <img width="100%" :src="coffee.coffee_img1">
    <div class="coffee-message">
        <h3 class="coffee-message-h3">{{coffee.coffee_name}}<span>+加入定制</span></h3>
        <div class="coffee-message-type">
            <span class="coffee-message-name">温度</span>
            <div>
                <span @click="temperature(0)" class="temperature-type temperature">热</span>
                <span class="temperature-type"  @click="temperature(1)">冷</span>

            </div>
        </div>
        <div class="coffee-message-type">
            <span class="coffee-message-name">糖</span>
            <div>
                <span  @click="sugar(0)"  class="sugar-type sugar">无糖</span>
                <span  @click="sugar(1)"  class="sugar-type">半糖</span>
                <span  @click="sugar(2)"  class="sugar-type">全糖</span>
            </div>
        </div> 
    </div>
    <div class="welfare-center">福利中心：<span>福利中心领券中心</span> </div>
    <div class="coffee-details">
        <h4>商品详情</h4>
        <img :src="coffee.coffee_img2">
    </div>
    <div class="bottom-add-shop">
        <div class="bottom-add-money">
            <div>
                <div>
                    <span class="s-price">￥{{coffee.coffee_reality_price}}</span>
                    <span class="y-price">￥{{coffee.coffee_original_price}}</span>
                </div>
                <div class="coffee-data">{{coffee.coffee_name}}￥{{coffee.coffee_original_price}}</div>
                
            </div>
            <van-stepper theme="round" button-size="22" disable-input />
        </div>
        <div class="bottom-buttom">
            <div><router-link to="/mycoffee" >充4增3</router-link></div>
            <!-- :to="{naem:'account',query:{'coffee_id':coffee_id}}" -->
            <div><router-link to="/account">立即购买</router-link></div>
            <div> <router-link to="/menu">加入购物车</router-link></div>
        </div>
        
    </div>
    <div class="box"></div>
    
</div>
</template>
<script>
import Vue from 'vue';
import { ShareSheet } from 'vant';
import { Toast } from 'vant';
Vue.use(ShareSheet);
export default {
    data(){
        return {
            coffee:{},
            // 接收的coffee的id
            coffee_id:null,
            showShare: false,
      options: [
        { name: '微信', icon: 'wechat' },
        { name: '微博', icon: 'weibo' },
        { name: '复制链接', icon: 'link' },
        { name: '分享海报', icon: 'poster' },
        { name: '二维码', icon: 'qrcode' },
      ],
        
        }
    },
    created(){
        // 接收路由传参
        this.coffee_id = this.$route.query.coffee_id
        console.log(this.$route.query.coffee_id)
        this.add()
    },
    methods: {
        // this.$store.state.menum.data是vuex中coffee的数据
        // 用传过来的id遍历出coffee的数据渲染页面
        add(){
            for(let index in this.$store.state.menum.data){
                if(index == this.coffee_id){
                    this.coffee=this.$store.state.menum.data[index]
                }
            }
        },
        returns(){
            // 点击返回
            this.$router.go(-1)
        },
        onSelect(option) {
           Toast(option.name);
           this.showShare = false;
        },
        temperature(num){
            let arr = document.getElementsByClassName("temperature-type")
            for(let i = 0;i<arr.length;i++){
                arr[i].className = "temperature-type"
            }
            arr[num].className = "temperature-type temperature"

        },
        sugar(num){
            let arr = document.getElementsByClassName("sugar-type")
            for(let i = 0;i<arr.length;i++){
                arr[i].className = "sugar-type"
            }
            arr[num].className = "sugar-type sugar"

        }
    },
}
</script>
<style scoped>
.details-operate{
    position: sticky;
    top: 0.25rem;
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 0 0.2rem;
    height: 0;
    font-size: 0.25rem;
}
.details-operate>div:nth-child(1){
        background-color: #2d2d35;
    border-radius: 50%;
    width: 0.3rem;
    height: 0.3rem;
    color: #ffe5e5;
    text-align: center;
    font-weight: 300;
    font-size: 0.25rem;
    line-height: 0.3rem;
}
.van-cell{
    background-color: transparent;
    color: #f00;
    font-weight: 800;
}
.details{
    background-color: #f5f5f5;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.coffee-message{
    background-color: #fefefe;
    width: 3.58rem;
    height: 1.94rem;
    margin-top: 0.1rem;
    padding: 0 0.15rem;
}
.coffee-message-h3{
    line-height: 0.85rem;
    /* text-indent: 0.2rem; */
    display: flex;
    justify-content: space-between;
}
.coffee-message-h3>span{
    font-size: 0.13rem;
    color: #666;
}
.welfare-center{
    background-color: #fefefe;
    width: 3.58rem;
    height: 0.37rem;
    margin-top: 0.1rem;
    line-height: 0.37rem;
    padding-left: 0.1rem;
}
.welfare-center>span{
    color: #f40;
}
.coffee-details{
    width: 3.58rem;
    margin-top: 0.1rem;
    background-color: #fefefe;
    padding: 0 0.09rem;
}
.coffee-details>h4{
    
    height: 0.37rem;
    line-height: 0.37rem;

}
.coffee-details>img{
    width: 3.4rem;
    margin: 0 auto;
}
.bottom-add-shop{
    width: 100%;
    background-color: #cedbee;
    height: 1rem;
    position: fixed;
    bottom: 0;
    display: flex;
    flex-direction: column;
}
.bottom-add-shop>div{
    flex: 1;
}
.details-operate[data-v-63f98a86]{
    z-index: 10000;
}
.van-share-sheet__cancel{
    color: black;
}
.bottom-add-money{
    display: flex;
    justify-content: space-between;
    height: 0.5rem;
    line-height: 0.5rem;
    padding:0 0.15rem;
}
.bottom-add-money>div:nth-child(1){
    height: 0.5rem;
    display: flex;
    line-height: 0.25rem;
    flex-direction: column;
}
.bottom-add-money>div>div{
    flex: 1;
}
.coffee-message-type{
    /* background-color: black; */
    height: 0.55rem;
    display: flex;
}
.coffee-message-type>div{
    margin-left: 0.2rem;
    display: flex;
}

.temperature-type{
    width: 0.8rem;
    height: 0.26rem;
    /* border:1px solid blue; */
    background-color: #f0f0f0;
    display: block;
    text-align: center;
    line-height: 0.26rem;
    margin-left: 0.1rem;
    border-radius: 0.2rem;
}
.sugar-type{
    width: 0.8rem;
    height: 0.26rem;
    /* border:1px solid blue; */
    background-color: #f0f0f0;
    display: block;
    text-align: center;
    line-height: 0.26rem;
    margin-left: 0.1rem;
    border-radius: 0.2rem;
}
.temperature{
    border:1px solid blue;
    background-color: #ffffff;
    line-height: 0.24rem;
}
.sugar{
    border:1px solid blue;
    background-color: #ffffff;
    line-height: 0.24rem;
}
.coffee-message-name{
    margin-top: 0.03rem;
    width: 0.3rem;
}
.box{
    height: 1rem;
}
.s-price{
    color: #df6b3f;
    font-size: 0.16rem;
    
}
.y-price{
    transform: scaleX(0.8) scaleY(0.8) ;
    display: inline-block;
    text-decoration: line-through;
    color: #858585;
}
.coffee-data{
    font-size: 0.13rem;
        line-height: 0.1rem; 
}
.bottom-buttom{
    display: flex;
    justify-content: space-around;
    /* align-items: center; */
}
.bottom-buttom>div{
    width: 1rem;
    height: 0.33rem;
    text-align: center;
    line-height: 0.33rem;
    border-radius: 0.17rem;
    font-size: 0.13rem;
    
}
.bottom-buttom>div:nth-child(1){
    border: 1px solid #f00;
    color: #f00;

}
.bottom-buttom>div:nth-child(2){
    border: 1px solid blue;
    color: blue;

}
.bottom-buttom>div:nth-child(3){
    border: 1px solid rgb(84, 127, 245);
    background-color: rgb(84, 127, 245);
    color: #d1d1d1;

}
</style>


